import React, { useState, useEffect } from 'react';
import screenfull from 'screenfull';
import { message, Tooltip } from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import './index.less';

const FullScreen = () => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const click = () => {
    if (!screenfull.isEnabled) {
      message.warning('you browser can not work');
    } else {
      screenfull.toggle();
      setIsFullscreen(!isFullscreen);
    }
  };
  // useEffect(() => {
  //   screenfull.isEnabled && screenfull.on('change', change);
  //   return () => {
  //     screenfull.isEnabled && screenfull.off('change', change);
  //   };
  // }, []);

  const title = isFullscreen ? '取消全屏' : '全屏';
  return (
    <div className='fullScreen-container'>
      <Tooltip placement='bottom' title={title}>
        <span onClick={click}>{!isFullscreen ? <FullscreenOutlined /> : <FullscreenExitOutlined />}</span>
      </Tooltip>
    </div>
  );
};

export default FullScreen;
